<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Violet Theme - Portfolio Page</title>
<meta name="keywords" content="violet, web portfolio, free templates, website templates, CSS, HTML" />
<meta name="description" content="Violet Portfolio Page - free CSS template provided by templatemo.com" />
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "templatemo_menu", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<!--////// CHOOSE ONE OF THE 3 PIROBOX STYLES  \\\\\\\-->
<link href="css_pirobox/white/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />
<!--<link href="css_pirobox/white/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />
<link href="css_pirobox/black/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />-->
<!--////// END  \\\\\\\-->

<!--////// INCLUDE THE JS AND PIROBOX OPTION IN YOUR HEADER  \\\\\\\-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/piroBox.1_2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 600, //animation speed
			bg_alpha: 0.5, //background opacity
			radius: 4, //caption rounded corner
			scrollImage : false, // true == image follows the page, false == image remains in the same open position
			pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
			pirobox_prev : 'piro_prev',// Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
			close_all : '.piro_close',// add class .piro_overlay(with comma)if you want overlay click close piroBox
			slideShow : 'slideshow', // just delete slideshow between '' if you don't want it.
			slideSpeed : 4 //slideshow duration in seconds(3 to 6 Recommended)
	});
});
</script>
<!--////// END  \\\\\\\-->
    
</head>
<body id="subpage">

<div id="templatemo_outer_wrapper_sp">
    <div id="templatemo_wrapper_sp">
    
        <div id="templatemo_header">
            <div id="site_title"><h1><a href="http://www.templatemo.com">Free CSS Templates</a></h1></div>
            <div id="templatemo_menu" class="ddsmoothmenu">
                <ul>
                    <li><a href="index.html"><span></span>Home</a></li>
                    <li><a href="about.html"><span></span>About Us</a>
                        <ul>
                            <li><a href="submenupage.html">Sub menu 1</a></li>
                            <li><a href="submenupage.html">Sub menu 2</a></li>
                            <li><a href="submenupage.html">Sub menu 3</a></li>
                        </ul>
                    </li>
                    <li><a href="portfolio.html" class="selected"><span></span>Portfolio</a>
                        <ul>
                            <li><a href="submenupage.html">Sub menu 1</a></li>
                            <li><a href="submenupage.html">Sub menu 2</a></li>
                            <li><a href="submenupage.html">Sub menu 3</a></li>
                            <li><a href="submenupage.html">Sub menu 4</a></li>
                            <li><a href="submenupage.html">Sub menu 5</a></li>
                        </ul>
                    </li>
                    <li><a href="blog.html"><span></span>Blog</a></li>
                    <li><a href="contact.html"><span></span>Contact</a></li>
                </ul>
                <br style="clear: left" />
            </div> <!-- end of templatemo_menu -->
            
            <div class="cleaner"></div>
        </div> <!-- end of templatemo header -->
        
        <div id="templatemo_middle_sp">
            <div id="mid_title">
                Our Portfolios	
            </div>
            <p>Sed vestibulum sem vitae ante facilisis tristique. Duis volutpat tortor eget sem scelerisque vel facilisis leo rutrum. Quisque sodales, ipsum risus interdum lacus, at cursus magna mauris eu elit. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>
            <div id="learn_more"><a href="#">Learn More</a></div>
            <div class="cleaner"></div>
        </div> <!-- end of middle -->
        
        <div id="templatemo_main">
        
            <div id="gallery">
                <div class="gallery_box">
                    <a class="pirobox" href="images/gallery/image_01_b.jpg" title="Sed sagittis orci nec ipsum sodales vitae interdum nibh tempor.">
                        <img src="images/gallery/image_01.jpg" alt="Image 01" class="image_wrapper" />
                    </a>
                    <div class="gl_box">
                        <a href="#" class="more float_l">Visit</a>
                        <a href="#" class="more float_r">Detail</a>
                        <div class="cleaner"></div>
                    </div>
                    <div class="cleaner"></div>
                </div>
                
                <div class="gallery_box">
                    <a class="pirobox" href="images/gallery/image_02_b.jpg" title="In dignissim elit non massa auctor hendrerit.">
                      <img src="images/gallery/image_02.jpg" alt="Image 02" class="image_wrapper" />
                    </a>
                    <div class="gl_box">
                        <a href="#" class="more float_l">Visit</a>
                        <a href="#" class="more float_r">Detail</a>
                        <div class="cleaner"></div>
                    </div>
                    <div class="cleaner"></div>
                </div>
                
                <div class="gallery_box">
                    <a class="pirobox" href="images/gallery/image_03_b.jpg" title="Vivamus at dolor eget ipsum pharetra semper a at nibh.">
                        <img src="images/gallery/image_03.jpg" alt="Image 03" class="image_wrapper" />
                    </a>
                    <div class="gl_box">
                        <a href="#" class="more float_l">Visit</a>
                        <a href="#" class="more float_r">Detail</a>
                        <div class="cleaner"></div>
                    </div>
                    <div class="cleaner"></div>
                </div>
                
                <div class="gallery_box gb_lmb">
                    <a class="pirobox" href="images/gallery/image_04_b.jpg" title="Suspendisse sagittis libero nec odio volutpat tempor sed sed est.">
                        <img src="images/gallery/image_04.jpg" alt="Image 04" class="image_wrapper" />
                    </a>
                    <div class="gl_box">
                        <a href="#" class="more float_l">Visit</a>
                        <a href="#" class="more float_r">Detail</a>
                        <div class="cleaner"></div>
                    </div>
                    <div class="cleaner"></div>
                </div>
                
                <div class="gallery_box">
                    <a class="pirobox" href="images/gallery/image_05_b.jpg" title="Proin id quam vitae turpis ultricies laoreet sed ac dolor.">
                        <img src="images/gallery/image_05.jpg" alt="Image 05" class="image_wrapper" />
                    </a>
                    <div class="gl_box">
                      <a href="#" class="more float_l">Visit</a>
                      <a href="#" class="more float_r">Detail</a>
                        <div class="cleaner"></div>
                    </div>
                    <div class="cleaner"></div>
                </div>
                
                <div class="gallery_box">
                    <a class="pirobox" href="images/gallery/image_06_b.jpg" title="Nam elementum est ac odio vestibulum aliquet.">
                        <img src="images/gallery/image_06.jpg" alt="Image 06" class="image_wrapper" />
                    </a>
                    <div class="gl_box">
                      <a href="#" class="more float_l">Visit</a>
                      <a href="#" class="more float_r">Detail</a>
                        <div class="cleaner"></div>
                    </div>
                    <div class="cleaner"></div>
                </div>
              
                <div class="gallery_box">
                    <a class="pirobox" href="images/gallery/image_07_b.jpg" title="Donec ornare mauris eu sapien eleifend ullamcorper.">
                        <img src="images/gallery/image_07.jpg" alt="Image 07" class="image_wrapper" />
                    </a>
                    <div class="gl_box">
                      <a href="#" class="more float_l">Visit</a>
                      <a href="#" class="more float_r">Detail</a>
                        <div class="cleaner"></div>
                    </div>
                    <div class="cleaner"></div>
                </div>
              
                <div class="gallery_box gb_lmb">
                    <a class="pirobox" href="images/gallery/image_08_b.jpg" title="Aenean convallis arcu feugiat metus sodales congue.">
                        <img src="images/gallery/image_08.jpg" alt="Image 08" class="image_wrapper" />
                    </a>
                    <div class="gl_box">
                        <a href="#" class="more float_l">Visit</a>
                        <a href="#" class="more float_r">Detail</a>
                        <div class="cleaner"></div>
                    </div>
                    <div class="cleaner"></div>
                </div>
          </div> 
            
            <div class="cleaner"></div>
        </div> <!-- end of main -->
    
    </div> <!-- wrapper -->
</div>

<div id="templatemo_footer_wrapper">
	<div id="templatemo_footer">
    
    	Copyright © 2048 <a href="#">Your Company Name</a> | <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
        
	</div>
</div>

</body>
</html>